<template>
  <el-container class="home-container">
    <el-header style="height:90px">
      <el-row class="row" :gutter="30">
        <el-col :span="6">
          <div class="grid-content first-content">
            <img src="@/assets/images/Logo.png" @click="togo('/index/start')">
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content mid-content">
            <ul>
              <li><a href="javascript:;" @click="togo('/index/myProject')">问卷中心</a> </li>
              <li><a href="javascript:;">意见反馈</a> </li>
              <li><a href="https://gitee.com/makabaka-questionnaire">帮助中心</a> </li>
            </ul>

          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content last-content">

            <el-popover
              class='popover-item'
              placement="bottom"
              title="消息列表"
              width="200"
              trigger="click"
              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">

              <i class="message-item el-icon-bell" slot="reference" />
            </el-popover>


            <el-dropdown>
                        <span class="el-dropdown-link">
                            <div class="avatar-item">
                                <img :src="user.avater" alt="">
                              <!-- <img src="../../assets/images/logo.jpg" alt=
ToolBar""> -->
                            </div>
                            <span class="item-username">
                                {{user.userName}}
                                <i class="el-icon-arrow-down"></i>
                            </span>
                        </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item divided @click.native="logOut">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-container>
        <el-main>
          <!-- <el-button type="primary" size="default" @click="goForm">添加问卷</el-button> -->
          <router-view></router-view>
        </el-main>
        <el-footer v-show="this.$route.path!=='/index/edit'">
          <div class="cpr">Copyright © 2021-2021 <a href="http://www.zut.edu.cn" style="color:#666" >ZUT</a> . All Rights Reserved.</div>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  created() {
    this.footerShow = this.$route.path === '/index';
    this.$http.get('/system/users/getLoginUser').then(res => {
      console.log('/system/users/getLoginUser', res)
      this.user.userName = res.data.loginUser.user.userName
    })
  },
  mounted() {
  },
  updated() {
    // console.log(this.$route.path)
    const currentPath = this.$route.path
    const mainArea = document.querySelector('.home-container')
    this.footerShow = currentPath !== '/index/edit';
    if (currentPath !== '/index/edit') {
      mainArea.style.overflow = 'auto'
    } else {
      mainArea.style.overflow = 'hidden'
    }
    console.log(currentPath)
  },

  data() {
    return {
      user: {
        avater: '../../assets/images/logo.jpg',
        userName: '----'
      },
      footerShow: true,
      barShow: false
    }
  },

  methods: {
    // 保存链接激活状态
    saveNavState(th) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    },
    logOut() {
      console.log('退出')
      localStorage.removeItem('Authorization')
      this.$router.push('/login')
      this.$message.info('退出成功')
    },
    togo(path) {
      this.$router.push(path)
      console.log(path)
    },
    goForm() {
      this.$router.push('index/edit')
    }

  }
}
</script>

<style lang="less" scoped>
@import "src/assets/css/themeColor";
.home-container {
  height: 100%;
  overflow: hidden;
}

.el-header {
  // background-color: #373d41;
  line-height: 100%;
  position: relative;
  font-size: 22px;

}
@media screen and(max-width: 1280px){
  .el-header {
    line-height: 100%;
    font-size: 18px;
    height: 80px!important;
  }
}
@media screen and(max-height: 500px){
  .el-header {
    height:70px!important;
    font-size: 18px;

  }
}


.el-main {
  background-color: @theme_background_light;
  //height: 90% !important;
}
.el-footer{
  height: 40px;
}

.row {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-content {
  // background-color: blue;
  height: 90px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;

  a:hover {
    color: @theme_pink;
  }
}

.first-content {
  img {
    height: 80%;
    display: flex;
  }
  :hover{
    cursor: pointer;
  }
}

.mid-content {
  ul li {
    float: left;
  }

  li a {
    padding: 0 50px;
    color: @theme_gray;
  }
}

.last-content {
  position: relative;

  i:hover {
    color: @theme_pink;
  }
  .popover-item{
    position: absolute;
    left: 30px;
  }


  .el-dropdown {
    font-size: 18px;

    :hover {
      cursor: pointer;
    }
  }

  .el-dropdown-link {
    line-height: 30px;
    display: block;
  }

  .avatar-item {
    float: left;
    left: -60px;
    top: -10px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: auto;
      height: 100%;
    }
  }

  .item-username {
    float: right;
    height: 40px;
    line-height: 40px;
  }
}
.el-main{
  padding: 0;
}

</style>
